<template>
  <van-list
    class="OfflineMall"
    v-model="data[active].loading"
    :finished="data[active].finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <!-- 搜索框 -->
    <van-search
      v-model="value"
      @search="onSearch"
      placeholder="请输入搜索关键词"
    />
    <!-- 轮播 -->
    <SwipePage :images="images" />
    <!-- 商品列表 -->
    <van-tabs v-model="active" color="#B99267">
      <van-tab title="价格">
        <ProductList :prosList="data[active].dataList" />
      </van-tab>
      <van-tab title="销量">
        <ProductList :prosList="data[active].dataList" />
      </van-tab>
    </van-tabs>
  </van-list>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import SwipePage from "@/components/SwipePage.vue";
import ProductList from "@/components/ProductList.vue";
import { Search, Tab, Tabs, List } from "vant";

Vue.use(List);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Search);
@Component({
  components: {
    SwipePage,
    ProductList,
  },
})
export default class OfflineMall extends Vue {
  private value: string = "";
  private active: number = 0;
  private images: string[] = [require("@/assets/img/banner1.png")];
  private data = [
    {
      form: {
        lat: "0",
        lon: "0",
        key: "",
        mid: 0,
        online: 1,
        order: 1,
        page: 1,
        size: 20,
      },
      loading: false,
      finished: false,
      dataList: [],
    },
    {
      form: {
        lat: "0",
        lon: "0",
        key: "",
        mid: 0,
        online: 1,
        order: 1,
        page: 1,
        size: 20,
      },
      loading: false,
      finished: false,
      dataList: [],
    },
  ];

  private onLoad(): void {
    this.$common.getAuthToken(this.getData);
  }
  private onSearch() {
    this.data[this.active].form.page = 1;
    this.data[this.active].dataList = [];
    this.getData();
  }
  private getData() {
    this.$post(`pros`, {
      ...this.data[this.active].form,
      key: this.value,
    }).then((res: any) => {
      if (res.code == 0) {
        this.data[this.active].loading = false;
        this.data[this.active].dataList = this.data[
          this.active
        ].dataList.concat(res.data.list);
        this.data[this.active].form.page += 1;
        if (res.data.list.length < 20) {
          this.data[this.active].finished = true;
        }
      }
    });
  }
}
</script>

<style lang="scss">
</style>
